<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>


    <style>
        body {
            background-image: url("img/login_bg.jpg");
            background-repeat: no-repeat;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="form row">
        <form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="register_form" @submit.prevent="login">
            <h3 class="form-title" style="font-size: 35px;margin-left: 400px;margin-top:20px;color: #ba8b00">欢迎登录</h3>
            <br>
            <div class="col-sm-9 col-md-9">
                <div class="input-group mb-3 input-group-sm">
                    <i class="fa fa-user fa-lg"></i>
                    <input style="width:400px;margin-left: 350px" class="form-control required" v-model="user.username"
                           type="text" placeholder="请输入用户名" name="username" autofocus="autofocus"/>
                </div>
                <div class="input-group mb-3 input-group-sm">
                    <i class="fa fa-lock fa-lg"></i>
                    <input style="width:400px;margin-left: 350px;margin-bottom: -10px;" class="form-control required"
                           v-model="user.password" type="password" placeholder="请输入密码" id="register_password"
                           name="password"/>
                </div>
                <div>
                    <label class="form-check-label" style="margin-left: 370px;margin-bottom: 10px;font-size: 12px">
                        <input type="checkbox" name="rem" class="form-check-input" value="" v-model="user.rem">记住密码
                    </label>
                </div>
                <div class="form-group">
                    <button style="margin-left: 350px"
                            class="btn btn-success pull-right">登录
                    </button>
                    <button style="margin-left: 80px"
                            class="btn btn-success pull-right"><a href="./register.html">注册</a>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="js/vue/vue.js"></script>
<script src="js/vue/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data:{
            user: {
                username: "",
                password: "",
                rem: ""
            }
        },
        methods: {
            login: function() {
                console.log("调用了登录");
                // alert(v.user.username);
                axios.post("/wemedia/ddUser/login", v.user).then(function (response) {
                    // alert(response.data.success);
                    if (response.data.success == true) {
                        // alert("登录成功!");
                        // $(function () {
                        //     $('.popover-show').popover('show');
                        // });
                        // $(function () {
                        //     $('.popover-show').on('shown.bs.popover', function () {
                        //     })
                        // });
                        location.href = "/index.html";//跳转到首页
                    } else {
                        // alert("登录失败!");
                        // $(function () {
                        //     $('.popover-show').popover('show');
                        // });
                        // $(function () {
                        //     $('.popover-show').on('shown.bs.popover', function () {
                        //     })
                        // });
                        // alert("登录失败！用户名或密码错误！");
                        location.href = "/login.html";//重新登录
                    }
                });
            }
        }
    })
</script>
</body>
</html>